<template>
    <div class="Main">
        <MySettings />

        <div :class="findRouteName">
            <keep-alive :include="['Home']">
                <router-view></router-view>
            </keep-alive>
        </div>

        <van-tabbar v-model="active" route :class="{ TB: Tabbar_TB }">
            <van-tabbar-item
                v-for="(item, index) in iconData"
                :key="index"
                :to="{ name: item.routeName }"
            >
                <!-- :to="{ name: item.routeName }" -->
                <template #icon="props">
                    <img :src="props.active ? item.active : item.inactive" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers } from 'vuex';
import MySettings from '../components/MySettings.vue'
export default {
    name: 'Main',
    components: {
        MySettings
    },
    data() {
        return {
            active: 0,
            iconData: [
                {
                    title: '首页',
                    // 选中的图
                    active: require('../assets/shouye2.png'),
                    // 没选中的图
                    inactive: require('../assets/shouye1.png'),
                    //路由名称
                    routeName: 'Home'
                },
                {
                    title: '发现',
                    // 选中的图
                    active: require('../assets/faxian2.png'),
                    // 没选中的图
                    inactive: require('../assets/faxian1.png'),
                    //路由名称
                    routeName: 'Recommend'
                },
                {
                    title: '首页',
                    // 选中的图
                    active: require('../assets/wode2.png'),
                    // 没选中的图
                    inactive: require('../assets/wode1.png'),
                    //路由名称
                    routeName: 'My'
                },
            ]
        };
    },
    computed: {
        // 引用state的Tabbar_TB
        ...mapState(['Tabbar_TB', 'mainRouter']),


        findRouteName() {
            this.iconData[1].routeName = this.mainRouter;
            return 'aaa'
        }
    },

    methods: {
        ...mapMutations({
            // 控制 标签栏位置开关
            Main_TB_Fn(commit, tf) {
                commit('Main_TB_Fn', tf);
            },
        }),
    },
    mounted() {
        setTimeout(() => {
            this.Main_TB_Fn(true);
        })

    },
}
</script>

<style lang="less">
.Main {
    .van-tabbar {
        height: 44px;
        bottom: -44px;
        transition: bottom 2s ease-out;

        &::before {
            content: '';
            position: absolute;
            height: 2px;
            width: 100%;
            background-color: #0c0a31;
            top: -1px;
            z-index: 1;
        }

        .van-tabbar-item {
            background-color: #0c0a31;

            .van-tabbar-item__icon {
                margin-bottom: 0;
                img {
                    height: 35px;
                }
            }
        }
    }

    // 一层
    .TB {
        bottom: 0px;
    }
}
</style>
